<template>
  <el-container class="lei">
    <el-header>
      <!--logo和项目名称-->
      <div class="left">
        <el-icon style="color: yellow;font-size: 2.6em;" class="el-icon-orange" />
        <font color="#fffff0" size="6.5px">物业管理系统</font>
      </div>
      <div class="right">
        <el-dropdown>
          <el-dropdown-menu />
          <font color="#fffff0" style="letter-spacing:30px;" size="5px">欢迎:<font color="black">{{nickname}}</font></font>
          <el-button type="text" @click="tuichu">安全退出</el-button>
        </el-dropdown>
        <font color="#9acd32"><a class="el-icon-watch"></a></font>
        <font color="#fffff0">今天是：{{nowTime}}</font>
      </div>
    </el-header>
    <el-container>
      <!--侧边栏-->
      <el-aside :width="isCollapse?'50px':'200px'">
        <!--展开/收起-->
        <div class="toggle_box" @click="toggleCollapse">|||</div>
        <el-menu
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#6495ED"
          text-color="#000000"
          active-text-color="#800000"
          :collapse="isCollapse"
          :default-active="activePath"
          :collapse-transition="false"
          :unique-opened="true"
          :router="true">
          <MenuTree :menuList="this.MenuList"></MenuTree>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
      <el-backtop>
      </el-backtop>
    </el-container>
  </el-container>
</template>

<script>
import MenuTree from '../components/MenuTree'
export default {
  name: 'Main',
  data () {
    return {
      isCollapse: false,
      activePath: '',
      nickname: '小学生',
      nowTime: '',
      MenuList: []
    }
  },
  mounted () {
    this.nowTimes()
    this.qu()
    this.chacaidan()
  },
  components: {
    MenuTree
  },
  methods: {
    tuichu () {
      window.sessionStorage.clear()
      this.$router.push('/')
    },
    toggleCollapse () {
      this.isCollapse = !this.isCollapse
    },
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    },
    async chacaidan () {
      const { data: res } = await this.$axios.post('/chacaidan', {
        nickname: sessionStorage.getItem('nickname')
      })
      console.log(res.logg)
      this.MenuList = res.logg
    },
    qu () {
      this.nickname = sessionStorage.getItem('nickname')
    },
    timeFormate (timeStamp) {
      const year = new Date(timeStamp).getFullYear()
      const month = new Date(timeStamp).getMonth() + 1 < 10 ? '0' + (new Date(timeStamp).getMonth() + 1) : new Date(timeStamp).getMonth() + 1
      const date = new Date(timeStamp).getDate() < 10 ? '0' + new Date(timeStamp).getDate() : new Date(timeStamp).getDate()
      const hh = new Date(timeStamp).getHours() < 10 ? '0' + new Date(timeStamp).getHours() : new Date(timeStamp).getHours()
      const mm = new Date(timeStamp).getMinutes() < 10 ? '0' + new Date(timeStamp).getMinutes() : new Date(timeStamp).getMinutes()
      const ss = new Date(timeStamp).getSeconds() < 10 ? '0' + new Date(timeStamp).getSeconds() : new Date(timeStamp).getSeconds()
      const week = new Date(timeStamp).getDay()
      const weeks = ['日', '一', '二', '三', '四', '五', '六']
      const getWeek = '星期' + weeks[week]
      this.nowTime = year + '年' + month + '月' + date + '日' + ' ' + hh + ':' + mm + ':' + ss + ' ' + getWeek
    },
    nowTimes () {
      this.timeFormate(new Date())
      setInterval(this.nowTimes, 1000)
      this.clear()
    },
    clear () {
      clearInterval(this.nowTimes)
      this.nowTimes = null
    }
  }
}
</script>

<style scoped>
.lei {
  height: 100%;
}
.right{
  float:right;
}
.left{
  display: flex;
  float:left;
  align-items: center
}
.el-header{
  background-color: #4682B4;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
}
.toggle_box {
  background-color: #DCDCDC;
  font-size: 15px;
  font-weight: bold;
  line-height: 24px;
  color: #FFFFFF;
  letter-spacing: 0.2em;
  text-align: center;
  cursor: pointer;
}
</style>
